<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>blessing</title>
<link rel="shortcut icon" href="https://cdn.xsiy.ltd/photo/ico.png">
<link rel="bookmark" href="https://cdn.xsiy.ltd/photo/ico.png">
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900");
html {
  display: grid;
  min-height: 100%;
}

body {
  display: grid;
  background: #183059;
}

.container {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 650px;
  height: 180px;
}

h1 {
  font-family: "Lato", sans-serif;
  text-align: center;
  margin-top: 2em;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: #F6F4F3;
}

#timer {
  color: #F6F4F3;
  text-align: center;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-size: .7em;
  letter-spacing: 5px;
}

.days, .hours, .minutes, .seconds {
  display: inline-block;
  padding: 20px;
  width: 100px;
  border-radius: 5px;
}

.days {
  background: #EF2F3C;
}

.hours {
  background: #F6F4F3;
  color: #183059;
}

.minutes {
  background: #276FBF;
}

.seconds {
  background: #F0A202;
}

.numbers {
  font-family: "Montserrat", sans-serif;
  color: #183059;
  font-size: 5em;
}

footer {
  position: absolute;
  bottom: 0;
  right: 0;
  text-transform: uppercase;
  padding: 10px;
  font-family: "Lato", sans-serif;
  font-size: 0.7em;
}
footer p {
  letter-spacing: 3px;
  color: #EF2F3C;
}
footer a {
  color: #F6F4F3;
  text-decoration: none;
}
footer a:hover {
  color: #276FBF;
}
</style>
</head>
<body>
<br><br><br>
<div class="container">
  <div id="timer"></div>
  <h1>孟利强&董利妮 我们结婚了</h1>
</div>


<script>
const fourthOfJuly = new Date("Oct 7, 2020 12:00:00").getTime();

// countdown
let timer = setInterval(function() {

  // get today's date
  const today = new Date().getTime();

  // get the difference
  const diff = fourthOfJuly - today;

  // math
  let days = Math.floor(diff / (1000 * 60 * 60 * 24));
  let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // display
  document.getElementById("timer").innerHTML =
    "<div class=\"days\"> \
  <div class=\"numbers\">" + days + "</div>days</div> \
<div class=\"hours\"> \
  <div class=\"numbers\">" + hours + "</div>hours</div> \
<div class=\"minutes\"> \
  <div class=\"numbers\">" + minutes + "</div>minutes</div> \
<div class=\"seconds\"> \
  <div class=\"numbers\">" + seconds + "</div>seconds</div> \
</div>";

}, 1000);
</script>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
  <p id="hitokoto">白头偕老，永结同心</p>
</div>
</body>
</html>